<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<script src="/property/js/jquery.min.js"></script>
	<th:block th:include="include :: header('新增岗位')" />
</head>
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m" id="form-product-add" enctype="multipart/form-data" >
<!--			<div class="form-group">-->
<!--				<label class="col-sm-3 control-label is-required">商品id：</label>-->
<!--				<div class="col-sm-8">-->
<!--					<input class="form-control" type="text" name="product_id" id="product_id" required>-->
<!--				</div>-->
<!--			</div>-->
			<input class="form-control" type="hidden" name="product_id" id="product_id" required>
			<div class="form-group">
				<label class="col-sm-3 control-label is-required">主商品名称：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="product_name" id="product_name" required>
				</div>
			</div>
			<!--			从分类表里面读取-->
			<div class="form-group">
				<label class="col-sm-3 control-label is-required">分类：</label>
				<div class="col-sm-8">
					<!--					下拉框，从数据库中读取分类数据-->
					<select class="form-control" id="sort_id" name="sort_id">

					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label is-required">详情：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="info" id="info" required>
				</div>
			</div>
		</form>
	</div>
	<script type="text/javascript">
		$(document).ready(function(){
			$.ajax({
				url:  ctx + "water/sortList",
				type: "post",
				dataType: "json",
				success:function(data){
					console.log(data.value);
					for (var i = 0; i < data.sl.length; i++) {
						//先创建好select里面的option元素
						var option = document.createElement("option");
						//给option的text赋值,这就是你点开下拉框能够看到的东西
						$(option).text(data.sl[i].sort_name);
						$(option).val(data.sl[i].id);
						$('#sort_id').append(option);
						//获取select 下拉框对象,并将option添加进select
						// $select.append('<option values="'+content.categories[i].categoryId+'">'+content.categories[i].categoryName+'</option>');
					}
				},
				error:function (data) {
					console.log(data);
				}
			});
		});
	</script>
	<th:block th:include="include :: footer" />
	<script type="text/javascript">
		var prefix = ctx + "water";
		function submitHandler() {
			// // const img = document.getElementById("img").files[0];
			// // console.log(img);
			// var form = $('#form-product-add')[0];
			//  console.log(form);
			//  var data = new FormData(form);
			//  console.log(data);
			// // data.append('headImg', img);
			// // console.log(data.get('headImg'));
			// $.operate.save1(prefix + "/add",data);
			$.operate.save(prefix + "/add", $('#form-product-add').serialize());
	    }



	</script>
</body>
</html>
